<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
      body {
        font-size: 30px;
      }
      ul,
      li {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        list-style-type: none;
      }

      .my_tree > li {
        color: green;
      }
      .my_tree > li > ul > li {
        color: red;
        padding-left: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="my_tree">
        <Tree :tree="item" v-for="item in treeData"></Tree>
      </ul>
    </div>

    <script>
      var Tree = Vue.extend({
        template: `
          <li>
            <a>{{tree.title}}</a>
            <ul>
              <Tree v-if="tree.children" :tree="item"  v-for="item in tree.children">{{item.title}}</Tree>
            </ul>
          </li>
        `,
        props: ["tree"],
        data: function() {
          return {};
        },
        name: "Tree"
      });

      // 创建根实例
      new Vue({
        el: "#app",
        data: {
          treeData: [
            {
              id: 100,
              title: "一级菜单100",
              children: [
                {
                  id: 10001,
                  title: "二级菜单100_01",
                  children: []
                },
                {
                  id: 10002,
                  title: "二级菜单100_01",
                  children: []
                }
              ]
            },
            {
              id: 101,
              title: "一级菜单101",
              children: [
                {
                  id: 10101,
                  title: "二级菜单101_01",
                  children: []
                }
              ]
            },
            {
              id: 102,
              title: "一级菜单102",
              children: []
            }
          ]
        },
        components: {
          Tree: Tree
        }
      });
    </script>
  </body>
</html>
